import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Table } from 'antd';

@connect(({ integratedquery, loading }) => ({
  loading: loading.models.integratedquery,
  empInsPayList: integratedquery.empInsPayList, // 社保实缴列表数据
  empAccuPayList: integratedquery.empAccuPayList, // 公积金实缴列表数据
}))
@Form.create()
class EmpInfor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      scroll: {
        x: 3000,
      },
    };
  }

  jumpRouting = targetRouter => {
    const { jumpRouting } = this.props;
    jumpRouting(targetRouter);
  };

  render() {
    const { scroll } = this.state;
    const { empInsPayList, loading, empAccuPayList } = this.props;
    // 社保实缴查询
    const socialColumns = [
      {
        title: '缴费月份',
        dataIndex: 'billYm',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
            width: '150px',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        fixed: 'left',
        // render: text => text && moment(text).format('YYYY-MM'),
        render: val => val && `${val.toString().substr(0, 4)}-${val.toString().substr(4, 5)}`,
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '签约方',
        dataIndex: 'ordSndrName',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '社保个人账号',
        dataIndex: 'empIndvAccoNo',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '缴费方式',
        dataIndex: 'payTypeName',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '执行地区',
        dataIndex: 'declAreaName',
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '养老保险',
        children: [
          {
            title: '个人账号',
            dataIndex: 'indvAccoNo_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '企业基数',
            dataIndex: 'unitBase_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业比例',
            dataIndex: 'unitProp_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'unitAmo_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: 'empBase_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例',
            dataIndex: 'empProp_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'empAmo_3',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '医疗保险',
        children: [
          {
            title: '个人账号',
            dataIndex: 'indvAccoNo_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),

            render: val => (val && val) || '--',
          },
          {
            title: '企业基数',
            dataIndex: 'unitBase_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业比例',
            dataIndex: 'unitProp_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'unitAmo_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: 'empBase_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例',
            dataIndex: 'empProp_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'empAmo_6',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '生育保险',
        children: [
          {
            title: '个人账号',
            dataIndex: 'indvAccoNo_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '企业基数',
            dataIndex: 'unitBase_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业比例',
            dataIndex: 'unitProp_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'unitAmo_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: 'empBase_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例',
            dataIndex: 'empProp_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'empAmo_7',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '失业保险',
        children: [
          {
            title: '个人账号',
            dataIndex: 'indvAccoNo_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '企业基数',
            dataIndex: 'unitBase_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业比例',
            dataIndex: 'unitProp_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'unitAmo_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: 'empBase_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例',
            dataIndex: 'empProp_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人缴费',
            dataIndex: 'empAmo_4',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
      {
        title: '工伤保险',
        dataIndex: 'a26',
        children: [
          {
            title: '个人账号',
            dataIndex: 'indvAccoNo_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            render: val => (val && val) || '--',
          },
          {
            title: '企业基数',
            dataIndex: 'unitBase_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业比例',
            dataIndex: 'unitProp_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '企业缴费',
            dataIndex: 'unitAmo_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人基数',
            dataIndex: 'empBase_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
          {
            title: '个人比例',
            dataIndex: 'empProp_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },

          {
            title: '个人缴费',
            dataIndex: 'empAmo_5',
            onCell: () => ({ style: { textAlign: 'center' } }),
            onHeaderCell: () => ({ style: { textAlign: 'center' } }),
          },
        ],
      },
    ];
    // 公积金实缴查询
    const accuColumns = [
      {
        title: '缴费月份',
        dataIndex: 'billYm',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
            width: '150px',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        fixed: 'left',
        // render: text => text && moment(text).format('YYYY-MM'),
        render: val => val && `${val.toString().substr(0, 4)}-${val.toString().substr(4, 5)}`,
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '签约方',
        dataIndex: 'ordSndrName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '公积金个人账号',
        dataIndex: 'empIndvAccoNo',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '缴费方式',
        dataIndex: 'payTypeName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '执行地区',
        dataIndex: 'declAreaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '企业基数',
        dataIndex: 'unitBase_2',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '企业比例',
        dataIndex: 'unitProp_2',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '企业缴费',
        dataIndex: 'unitAmo_2',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个人基数',
        dataIndex: 'empBase_2',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个人比例',
        dataIndex: 'empProp_2',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '个人缴费',
        dataIndex: 'empAmo_2',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
      {
        title: '账户余额',
        dataIndex: 'accoAmo',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
            textAlign: 'center',
          },
        }),
        onCell: () => ({ style: { textAlign: 'center' } }),
      },
    ];
    return (
      <div>
        <Card
          style={{ marginBottom: 12 }}
          title={<span style={{ fontWeight: 'bolder' }}>社保实缴查询</span>}
          bordered={false}
          extra={<a onClick={() => this.jumpRouting('socialPay')}>缴纳记录&gt;&gt;</a>}
          id="socialsecuritypayment"
        >
          <Table
            rowSelection={null}
            scroll={scroll}
            columns={socialColumns}
            dataSource={empInsPayList && empInsPayList.list}
            loading={loading}
            pagination={false}
            bordered
          />
        </Card>
        <Card
          style={{ marginBottom: 12 }}
          title={<span style={{ fontWeight: 'bolder' }}>公积金实缴查询</span>}
          bordered={false}
          extra={<a onClick={() => this.jumpRouting('accuPay')}>缴纳记录&gt;&gt;</a>}
          id="providentfundpayment"
        >
          <Table
            rowSelection={null}
            columns={accuColumns}
            dataSource={empAccuPayList && empAccuPayList.list}
            loading={loading}
            pagination={false}
            bordered
          />
        </Card>
      </div>
    );
  }
}

export default EmpInfor;
